<template>
  <div class="m-news-list">
    <div class="mescroll-region" ref="mescroll">
      <!-- 面包屑 -->
      <div class="bread-crumb m-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>{{ $t("yunLianUsedMachine") }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryName == "1" ? $t("industryNews") : $t("transactionCase") }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 图文列表 -->
      <section class="article-list m-container">
        <template v-if="articleList.length">
          <a class="article-item" v-for="item in articleList" :key="item.id" :href="`/m-news-detail/${item.id}`" :title="item.title">
            <div class="pic">
              <el-image class="info-img" fit="cover" :src="item.imageUrl" lazy :alt="item.title"></el-image>
            </div>
            <div class="info-bottom">
              <div class="article-title">{{ item.title }}</div>
              <div class="category-name">{{ item.categoryName == "1" ? $t("industryNews") : $t("transactionCase") }}</div>
              <div class="release-time">{{ item.releaseTime }}</div>
            </div>
          </a>
        </template>
        <div class="no-data" v-else>
          <div class="no-pic">
            <img class="pic-empty" src="https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/pic-empty.png" />
            <p>{{ $t("noMore") }}</p>
          </div>
        </div>
      </section>
    </div>
    <!-- WhatsApp -->
    <!-- <WhatsAppM v-if="locale == 'en-US'" /> -->
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "M-newsList",
  layout: "mobile",
  data() {
    return {
      phoneIcon: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/no-more.png",
      mescroll: null
    }
  },
  head() {
    return {
      title: this.$i18n.t("headTitle"),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$i18n.t("haeaKeyContent")
        },
        {
          hid: "description",
          name: "description",
          content: this.$i18n.t("haeaDecContent")
        }
      ]
    }
  },
  async asyncData({ app, params }) {
    let paramsRes = params.listParams
    console.log("paramsRes", paramsRes)
    let total = 0
    let pageSizeNum = 10
    let categoryName = paramsRes
    let articleList = []
    try {
      const equipmentParams = {
        pageNo: 1,
        pageSize: pageSizeNum,
        sort: "id desc",
        search: {
          categoryName
        }
      }
      let { data } = await app.$api.articleList({ ...equipmentParams })
      articleList = data.list || []
      total = data.total
    } catch (error) {
      console.log(error)
    }
    return {
      total,
      pageSizeNum,
      categoryName,
      articleList
    }
  },
  props: {},
  computed: { ...mapState(["locale"]) },
  async mounted() {
    this.getPoint()
    // 创建MeScroll对象：为避免配置的id和父组件id重复，这里使用ref的方式初始化mescroll
    this.mescroll = new this.$mescroll(this.$refs.mescroll, {
      // 初始化mescroll,以确保您配置的dom元素能够被找到
      up: {
        auto: true, // 是否在初始化时以上拉加载的方式自动加载第一页数据
        callback: this.upCallback, // 此处可简写，相当于 callback: function (page) { upCallback(page) }
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10 //每页数据条数,默认10
        },
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据
        htmlLoading: `<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">${this.$i18n.t("loading")}..</p>`, //上滑加载loading文案
        htmlNodata: `<p class="upwarp-nodata"><img src="${this.phoneIcon}" /><span>${this.$i18n.t("noMore")}</span></p>` //不配置页面底部无数据提示
      },
      down: {
        textOutOffset: `${this.$i18n.t("releaseUpdates")}`, //下拉刷新loading文案
        textLoading: `${this.$i18n.t("loading")}` //下拉刷新loading文案
      }
    })
  },
  methods: {
    // 上拉加载回调
    upCallback(page) {
      // console.log("upCallback", page)
      this.getListDataFromNet(
        page.num,
        page.size,
        (curPageData) => {
          if (page.num == 1) {
            this.articleList = curPageData
          } else {
            this.articleList = this.articleList.concat(curPageData)
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(curPageData.length)
          })
        },
        () => {
          this.mescroll.endErr()
        }
      )
    },
    async getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
      const params = {
        pageNo: pageNum,
        pageSize: pageSize,
        search: {
          categoryName: this.categoryName
        }
      }
      try {
        let {
          data: { list }
        } = await this.$api.articleList(params)
        let articleList = list || []
        successCallback && successCallback(articleList)
      } catch (e) {
        errorCallback && errorCallback()
      }
    },
    async getPoint() {
      let params = await this.$optionPoint.sendUrl(window, navigator, document)
      this.$api.burySave({ ...params }).then((res) => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dropdown-menu {
  max-height: 1600px;
  overflow: scroll;
  .selected-item {
    ::v-deep .el-dropdown-menu__item {
      color: #fb463f;
    }
  }
}
.m-news-list {
  .mescroll-region {
    width: 100%;
    position: fixed;
    top: 225px;
    bottom: 0;
    overflow-y: auto;
    margin-bottom: 300px;
    ::v-deep .upwarp-nodata {
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 108px;
        height: 82px;
        margin-right: 20px;
      }
      span {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 61px;
        color: #999;
      }
    }
    .bread-crumb {
      margin-top: 80px;
    }
    .article-list {
      margin-top: 80px;
      .article-item {
        width: 100%;
        margin-bottom: 50px;
        display: flex;
        .pic {
          width: 40%;
          height: 480px;
          .info-img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .info-bottom {
          width: 60%;
          height: 480px;
          background: #f6f7f9;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 50px;
          box-sizing: border-box;
          .article-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 72px;
            color: #333;
            line-height: 92px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .category-name {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 60px;
            color: #999;
            line-height: 80px;
          }
          .release-time {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 50px;
            color: #999;
          }
        }
      }
      .no-data {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 500px;
        .no-pic {
          .pic-empty {
            width: 1172px;
            height: 768px;
          }
          p {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 82px;
            color: #333;
            line-height: 92px;
            margin-top: 50px;
            text-align: center;
          }
        }
        .help-car {
          width: 768px;
          height: 205px;
          line-height: 205px;
          text-align: center;
          background: #d71519;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 72px;
          color: #fff;
          margin-top: 102px;
        }
      }
    }
  }
}
</style>
